<template>
  <el-dialog
    :title="dialogTitle"
    :model-value="visible"
    width="450px"
    :close-on-click-modal="false"
    @update:model-value="updateVisible"
    @close="handleClose"
  >
    <el-form 
      ref="formRef" 
      :model="formData" 
      :rules="rules" 
      label-width="100px"
    >
      <el-form-item label="课程" prop="courseId">
        <el-select 
          v-model="formData.courseId" 
          placeholder="选择课程" 
          filterable 
          style="width: 100%;"
        >
          <el-option 
            v-for="course in courses" 
            :key="course.id" 
            :label="course.name" 
            :value="course.id">
          </el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="任务名称" prop="name">
        <el-input 
          v-model="formData.name" 
          placeholder="请输入教学任务名称，如：高等数学A-1班" 
          maxlength="100"
          show-word-limit
          style="width: 100%;"
        />
      </el-form-item>
      
      <el-form-item label="学期" prop="termId">
        <el-select 
          v-model="formData.termId" 
          placeholder="选择学期" 
          style="width: 100%;"
        >
          <el-option 
            v-for="term in terms" 
            :key="term.id" 
            :label="term.name" 
            :value="term.id">
          </el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="队次" prop="classIds">
        <el-select 
          v-model="formData.classIds" 
          multiple 
          placeholder="选择队次" 
          filterable 
          style="width: 100%;"
        >
          <el-option 
            v-for="lcClass in lcClasses" 
            :key="lcClass.id" 
            :label="lcClass.name" 
            :value="lcClass.id">
          </el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="备注" prop="remark">
        <el-input 
          v-model="formData.remark" 
          type="textarea" 
          :rows="3" 
          placeholder="请输入备注信息">
        </el-input>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { ref, watch, nextTick } from 'vue'

export default {
  name: 'TeachingMissionFormDialog',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    teachingMission: {
      type: Object,
      default: null
    },
    courses: {
      type: Array,
      default: () => []
    },
    terms: {
      type: Array,
      default: () => []
    },
    lcClasses: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue', 'submit'],
  setup(props, { emit }) {
    const visible = ref(false)
    const formRef = ref(null)
    const dialogTitle = ref('')
    
    const formData = ref({
      id: null,
      courseId: '',
      name: '',
      termId: '',
      classIds: [],
      remark: ''
    })
    
    const rules = {
      courseId: [
        { required: true, message: '请选择课程', trigger: 'change' }
      ],
      name: [
        { required: true, message: '请输入任务名称', trigger: 'blur' },
        { min: 1, max: 100, message: '任务名称长度在1到100个字符', trigger: 'blur' }
      ],
      termId: [
        { required: true, message: '请选择学期', trigger: 'change' }
      ]
    }

    // 监听modelValue变化
    watch(() => props.modelValue, (val) => {
      visible.value = val
      if (val) {
        initForm()
      }
    }, { immediate: true })

    // 监听visible变化
    watch(visible, (val) => {
      emit('update:modelValue', val)
    })

    const initForm = () => {
      if (props.teachingMission) {
        dialogTitle.value = '编辑教学任务'
        
        formData.value = {
          id: props.teachingMission.id,
          courseId: props.teachingMission.courseId || 
                   (props.teachingMission.course && props.teachingMission.course.id) || 
                   '',
          name: props.teachingMission.name || '',
          termId: props.teachingMission.termId || 
                 (props.teachingMission.term && props.teachingMission.term.id) || 
                 '',
          classIds: props.teachingMission.classIds || 
                   (props.teachingMission.lcClasses && props.teachingMission.lcClasses.map(c => 
                     typeof c === 'object' ? c.id : c)) || 
                   [],
          remark: props.teachingMission.remark || ''
        }
      } else {
        dialogTitle.value = '新增教学任务'
        resetForm()
      }
      
      // 清除表单验证
      nextTick(() => {
        if (formRef.value) {
          formRef.value.clearValidate()
        }
      })
    }

    const resetForm = () => {
      formData.value = {
        id: null,
        courseId: '',
        name: '',
        termId: '',
        classIds: [],
        remark: ''
      }
    }

    const updateVisible = (value) => {
      emit('update:modelValue', value)
    }

    const handleClose = () => {
      emit('update:modelValue', false)
    }

    const handleCancel = () => {
      emit('update:modelValue', false)
    }

    const handleSubmit = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          emit('submit', formData.value)
          visible.value = false
        }
      })
    }
    
    return {
      visible,
      formRef,
      dialogTitle,
      formData,
      rules,
      updateVisible,
      handleClose,
      handleCancel,
      handleSubmit
    }
  }
}
</script>

<style scoped>
/* 基本样式 */
</style>
